<template>
	<view class="mb_33">
		<view class="invite_box box bc_fff br_6 mt_12">
			<view class="fc_333 fz_16 fb mt_10 box mb_2">
				邀请数据概况
			</view>
			<view class="invite_content">
				<view class="single width_160 height_60 br_4 mt_8 box">
					<view class="fz-12 fc_333">
						分享商品次数（次）
					</view>
					<view class="fz_16 fc_333 fb mt_4">
						{{behaviorData.inviteDto.shareNum||0}}
					</view>
				</view>
				<view class="single width_160 height_60 br_4 mt_8 box">
					<view class="fz-12 fc_333">
						收藏商品数（次）
					</view>
					<view class="fz_16 fc_333 fb mt_4">
						{{behaviorData.inviteDto.collectNum||0}}
					</view>
				</view>
				<view class="single width_160 height_60 br_4 mt_8 box">
					<view class="fz-12 fc_333">
						购买商品数（次）
					</view>
					<view class="fz_16 fc_333 fb mt_4">
						{{behaviorData.inviteDto.buyNum||0}}
					</view>
				</view>
				<view class="single width_160 height_60 br_4 mt_8 box">
					<view class="fz-12 fc_333">
						加购商品（次）
					</view>
					<view class="fz_16 fc_333 fb mt_4">
						{{behaviorData.inviteDto.addBuyNum||0}}
					</view>
				</view>
				<view class="single width_160 height_60 br_4 mt_8 box">
					<view class="fz-12 fc_333">
						浏览商品数（次）
					</view>
					<view class="fz_16 fc_333 fb mt_4">
						{{behaviorData.inviteDto.visitNum||0}}
					</view>
				</view>
				<view class="single width_160 height_60 br_4 mt_8 box">
					<view class="fz-12 fc_333">
						邀请注册数（次）
					</view>
					<view class="fz_16 fc_333 fb mt_4">
						{{behaviorData.inviteDto.registerNum||0}}
					</view>
				</view>
			</view>
		</view>
		<view class="range_box box mt_12 bc_fff br_6">
			<u-picker @confirm="bindPickerConfirm" @cancel="typeChange(false)"
				class="type_picker width_92 height_44 bc_fff br_8 mt_12 mr_10" :show="showType" :columns="typeList"
				keyName="label">

			</u-picker>
			<view class="range_header">
				<view class="fz_16 fb">
					邀请数据排行
				</view>
				<view class="chhoose_box box width_108 height_29 br_8" @click="typeChange(true)">
					<view class="fz_12">
						{{orderType.label}}
					</view>
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
			<view class="range_list">
				<template v-for="(item,index) in behaviorData.userList">
					<view class="single_list box w100 height_44" v-if="index< 10">
						<view class="list_left">
							<view class="width_36 mr_16" v-if="index<3">
								<image :src="'../../../../static/images/range_'+ index +'.png'"
									class="width_36 height_36 range_img" mode="">
								</image>
							</view>
							<view class="width_36 mr_16 fz_14 fb fc" v-else>
								{{index +1}}
							</view>
							<view class="width_30 height_30 br_15 mr_8">
								<image class="avatar_img"
									:src="item.avatar?item.avatar:'../../static/images/avatar_empty.png'" mode="">
								</image>
							</view>
							<view class="fz_14 fc_333">
								{{item.username}}
							</view>
						</view>
						<view class="list_right fz_14">
							{{orderType.id==1?item.shareNum||0:orderType.id==2?item.collectNum||0:orderType.id==3?item.purchaseNum||0:orderType.id==4?item.addNum||0:orderType.id==5?item.lookNum||0:item.inviteNum||0}}
						</view>
					</view>
				</template>
				<!-- 	<view class="single_list box w100 height_44">
					<view class="list_left">
						<view class="width_36 mr_16">
							<image src="../../../../static/images/range_1.png" class="width_36 height_36" mode="">
							</image>
						</view>
						<view class="width_30 height_30 br_15 mr_8">

						</view>
						<view class="fz_14 fc_333">
							张思
						</view>
					</view>
					<view class="list_right fz_14">
						355
					</view>
				</view> -->
				<!-- 		<view class="single_list box w100 height_44">
					<view class="list_left">
						<view class="width_36 mr_16">
							<image src="../../../../static/images/range_2.png" class="width_36 height_36" mode="">
							</image>
						</view>
						<view class="width_30 height_30 br_15 mr_8">

						</view>
						<view class="fz_14 fc_333">
							张思
						</view>
					</view>
					<view class="list_right fz_14">
						355
					</view>
				</view> -->
				<!-- <view class="single_list box w100 height_44">
					<view class="list_left">
						<view class="width_36 mr_16">
							<image src="../../../../static/images/range_3.png" class="width_36 height_36" mode="">
							</image>
						</view>
						<view class="width_30 height_30 br_15 mr_8">

						</view>
						<view class="fz_14 fc_333">
							张思
						</view>
					</view>
					<view class="list_right fz_14">
						355
					</view>
				</view> -->
				<!-- 				<view class="single_list box w100 height_44 color_list">
					<view class="list_left">
						<view class="width_36 mr_16 fz_14 fb fc">
							4
						</view>
						<view class="width_30 height_30 br_15 mr_8">

						</view>
						<view class="fz_14 fc_333">
							张思
						</view>
					</view>
					<view class="list_right fz_14">
						355
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			behaviorData: {
				default: {},
				type: Object,
			},
			orderType: {
				default: {
					id: 1,
					label: "分享商品次数"
				},
				type: Object,
			}
		},
		data() {

			return {
				showType: false,
				typeList: [
					[{
						label: "分享商品次数",
						id: 1
					}, {
						label: "收藏商品数",
						id: 2
					}, {
						label: "购买商品数",
						id: 3
					}, {
						label: "加购商品数",
						id: 4
					}, {
						label: "浏览商品数",
						id: 5
					}, {
						label: "邀请注册数",
						id: 6
					}]
				],
				typeValue: 1
			}
		},
		methods: {
			bindPickerConfirm(e) {
				console.log("选择的值")
				console.log(e)
				const value = e.value[0]
				this.typeValue = value
				this.typeChange(false)
				this.$emit("oderTypeChange", value)
			},
			typeChange(value) {
				this.showType = value
			}

		}
	}
</script>

<style lang="scss" scoped>
	.invite_box {
		@include set_padding(8rpx, 8rpx);

		.invite_content {
			@include flex_box(row, wrap, space-between, center);

			.single {
				@include set_padding(8rpx, 8rpx);
				background-color: #F5F7FB;
				@include flex_box(column, nowrap, center, flex-start);
			}
		}
	}

	.range_box {
		background-color: #fff;

		.range_header {
			color: #1D2129;
			@include set_padding(8rpx, 12rpx);
			@include flex_box(row, nowrap, space-between, center);

			.chhoose_box {
				@include set_padding(0rpx, 8rpx);
				@include flex_box(row, nowrap, space-between, center);
				border: 1px solid rgba(0, 0, 0, 0.1);
				color: #999999;
			}
		}

		.range_list {
			.single_list {
				@include set_padding(0rpx, 12rpx);
				@include flex_box(row, nowrap, space-between, center);

				.list_left {
					@include flex_box(row, nowrap, flex-start, center);

					.range_img {}

					.avatar_img {
						width: 60rpx;
						height: 60rpx;
					}
				}

				.list_right {
					color: #DE3F26;
				}
			}

			.color_list {
				background-color: #F9F8F9;
			}
		}
	}
</style>